<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
    class="small-dialog"
    top="5vh"
  >
    <el-form :model="value" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="收件人:" prop="name">
        <div class="row">
          <div class="col col-7">
            <el-input v-model="value.name" placeholder="请输入收件人称呼"></el-input>
          </div>
          <div class="col col-5">
            <span>请输入收件人名称</span>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="所在城市:" prop="districtIds">
        <div class="row">
          <div class="col col-7">
            <h-district-choose @change="addressChange" v-model="value.districtIds"/>
          </div>
          <div class="col col-5">
            <span>请选择用户所在的城市</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="详细地址:" prop="address">
        <div class="row">
          <div class="col col-7">
            <el-input v-model="value.address" placeholder="请输入信息地址"/>
          </div>
          <div class="col col-5">
            <span>请输入详细地址精确到门牌</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="联系电话:" prop="mobile">
        <div class="row">
          <div class="col col-7">
            <el-input v-model="value.mobile" placeholder="请输入联系电话"/>
          </div>
          <div class="col col-5">
            <span>请输入联系电话</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="邮政编码:">
        <div class="row">
          <div class="col col-7">
            <el-input v-model="value.zipcode" placeholder="请输入邮政编码"/>
          </div>
          <div class="col col-5">
            <span>请输入邮政编码</span>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div v-if="value!=null" slot="footer" style="text-align: center">
      <el-button type="primary" @click="addAddress"> 添加新地址</el-button>
      <el-button @click="closed"> 关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import HDistrictChoose from 'src/components/common/HDistrictChoose'
  import FrontService from 'src/service/front'

  export default {
    name: 'HAddressDialog',
    mixins: [Dialog],
    components: {HDistrictChoose},
    data() {
      return {
        datas: [],
        loading: false,
        rules: {
          districtIds: [
            {required: true, message: '请选择所在的城市', trigger: 'change'}
          ],
          address: [
            {required: true, message: '请输入详细地址', trigger: 'blur'},
            {min: 1, message: '请输入详细地址', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入联系号码', trigger: 'blur'},
            {min: 8, message: '请输入正确的号码', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入收件人的称呼', trigger: 'blur'}
          ]
        }
      }
    },
    props: {
      value: {
        type: Object,
        default: null
      }
    },
    methods: {
      addressChange: function (data) {
        this.value.district = data.names.join('/')
      },
      addAddress: function () {
        const me = this
        this.$refs['form'].validate((valid) => {
          if (valid) {
            FrontService.addUserAddress(me.value).then(d => {
              if (d != null) {
                me.$message.success('添加新地址成功!')
                me.$emit('success', d.datas[0])
              }
            })
          } else {
            return false
          }
        })
      }

    }
  }
</script>
